<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%;}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=XnDTC7qQsG2aTxzmVkevfqoxBXRQxli8"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container"); // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915); // 呼和浩特市的经纬度
    map.centerAndZoom(point, 7); // 初始化地图，设置中心点坐标和地图级别，将地图比例缩小
    // 添加地图的放大缩小控件
    var zoomCtrl = new BMapGL.ZoomControl();
    map.addControl(zoomCtrl);
    // 设置地图样式，隐藏所有标签和图标
    map.setMapStyleV2({
        styleJson: [{
            "featureType": "all",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": {
                "visibility": "off"
            }
        }]
    });

    var bdary = new BMapGL.Boundary();
    var districts = ['武川县','土默特左旗','呼和浩特市回民区','呼和浩特市玉泉区','呼和浩特市赛罕区', '呼和浩特市托克托县','呼和浩特市和林格尔县','呼和浩特市回民区','呼和浩特市清水河县','呼和浩特市新城区']; // 呼和浩特市下面的区
    var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#C0C0C0', '#808080', '#800000', '#808000']; // 不同区域的颜色
    for (var i = 0; i < districts.length; i++) {
        (function(district, color) {
            bdary.get(district, function(rs){ // 获取行政区域
                var count = rs.boundaries.length; // 行政区域的点有多少个
                for(var i = 0; i < count; i++){
                    var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: color, fillColor: color}); // 建立多边形覆盖物
                    // ply.addEventListener('mouseover', function() {
                    //     alert('你的鼠标在' + district + '区域内');
                    // });
                    map.addOverlay(ply);  // 添加覆盖物
                    map.setViewport(ply.getPath()); // 调整视野
                }
            });
        })(districts[i], colors[i]);
    }

    // 创建全球范围的覆盖物
    var globalOverlay = new BMapGL.Polygon([
        new BMapGL.Point(-180, -90),
        new BMapGL.Point(-180, 90),
        new BMapGL.Point(180, 90),
        new BMapGL.Point(180, -90)
    ], {fillColor: "#000a3c", fillOpacity: 1, strokeOpacity: 0});
    map.addOverlay(globalOverlay);

    // 在地图上标记点
    var points = [
        new BMapGL.Point(111.749995, 40.842356),
        new BMapGL.Point(111.749996, 40.842357),
        new BMapGL.Point(111.749997, 40.842358)
    ];

    map.addEventListener('tilesloaded', function() {
        map.setZoom(10);
    });
</script>
</body>
</html>
